import { FetchMeetingListItem } from '@/api/auditManager/interface'
import { forwardRef, useEffect, useState } from 'react'
import { Utils } from '@/pages/meetingList/MeetingCard/utils'
import { OverLayExtraProps } from '@kedacom/react-next'
import styled from 'styled-components'
import { fetchGetMeetingRoom } from '@/api/global'
import { t } from 'i18next'

const DetailWrap = styled.div`
	line-height: 1.5;
	text-align: left;
	color: #4e4e4e;
	font-size: 12px;
	max-height: 139px;
	padding: 5px;
	width: 390px;
	border: 1px solid #555555;
	background-color: white;
	padding: 5px;
	overflow-x: hidden;
	overflow-y: auto;
	.rooms_dialog_content {
		line-height: 1.5;
		border-spacing: 0;
		border-collapse: collapse;
		text-align: left;
		color: #4e4e4e;
		font-size: 12px;
		box-sizing: content-box;
		margin: 0;
		padding: 0;
		margin-top: 10px 0;
		overflow-x: hidden;
		overflow-y: auto;
		max-height: 350px;
		width: 389px;
		.rooms_dialog_num_wrap {
			line-height: 1.5;
			border-spacing: 0;
			border-collapse: collapse;
			text-align: left;
			font-size: 12px;
			box-sizing: content-box;
			margin: 0;
			padding: 0;
			color: #727272;
			margin-left: 5px;
		}
		.rooms_dialog_name_wrap {
			display: flex;
			.rooms_region_data {
				word-wrap: normal;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-break: normal;
			}
			.rooms_region_name {
				line-height: 1.5;
				font-size: 12px;
				border-spacing: 0;
				color: #333;
				border-collapse: collapse;
				vertical-align: top;
				box-sizing: content-box;
				margin: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-wrap: normal;
				word-break: normal;
				padding: 7px 5px;
				text-align: left;
				width: 50%;
			}
			.rooms_room_name {
				line-height: 1.5;
				font-size: 12px;
				border-spacing: 0;
				color: #333;
				border-collapse: collapse;
				vertical-align: top;
				box-sizing: content-box;
				margin: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-wrap: normal;
				word-break: normal;
				padding: 7px 5px;
				text-align: left;
				width: 50%;
			}
		}
	}
`
interface room {
	region_num: number
	room_num: number
	_show_arr: Array<{
		region: string
		room: string
	}>
}
type PopUpProps = {
	meeting: FetchMeetingListItem
} & OverLayExtraProps

const Room = forwardRef((props: PopUpProps, ref: any) => {
	const { ...restProps } = props
	const [roomsDetailInfo, setRoomsDetailInfo] = useState<room>({
		region_num: 0,
		room_num: 0,
		_show_arr: [],
	})
	const fetchRoomInfo = async () => {
		const rooms = props.meeting.rooms
		let roomObj: any = { len: 0 }
		let regionObj: any = { len: 0 }
		let _show_arr: Array<{
			region: string
			room: string
		}> = []
		for (let j = 0, len = rooms.length; j < len; j++) {
			let room: any = rooms[j]
			//计算非重复会议区域
			if (roomObj[room.id] == undefined) {
				roomObj[room.id] = room.id
				roomObj.len++
			}
			//根据roomid去获取区域信息
			const res = await fetchGetMeetingRoom(`/meeting_room/${room.id}`)
			if (res && res.success) {
				//计算非重复会议室数量
				if (regionObj[res.data.region_name] == undefined) {
					regionObj[res.data.region_name] = res.data.region_name
					regionObj.len++
				}
				_show_arr.push({
					region: Utils.shorten(Utils.code.encodeHTML(res.data.region_name), 25),
					room: room.name
						? Utils.shorten(Utils.code.encodeHTML(room.name), 25)
						: '<span style="color:red;">' + t('无') + '</span>',
				})
			}
		}
		setRoomsDetailInfo({
			region_num: roomObj.len,
			room_num: regionObj.len,
			_show_arr: _show_arr,
		})
	}

	useEffect(() => {
		fetchRoomInfo()
	}, [props.meeting.rooms])

	return (
		<DetailWrap className="rooms_dialog_detail" ref={ref} {...restProps}>
			<div className="rooms_dialog_content">
				<div className="rooms_dialog_time_wrap">
					<span></span>
				</div>
				<div className="rooms_dialog_num_wrap">
					{t('共有{{region_num}}个区域{{room_num}}个会议室', {
						region_num: roomsDetailInfo?.region_num ?? 0,
						room_num: roomsDetailInfo?.room_num ?? 0,
					})}
				</div>
				{roomsDetailInfo?._show_arr.map((item, index) => {
					return (
						<div className="rooms_dialog_name_wrap" key={index}>
							<div className="rooms_region_name">{item.region}</div>
							{item.room === 'null' ? (
								<div className="rooms_room_name" style={{ color: 'red' }}>
									{t('无')}
								</div>
							) : (
								<div className="rooms_room_name">{item.room}</div>
							)}
						</div>
					)
				})}
			</div>
		</DetailWrap>
	)
})
export default Room
